<template>
  <view class="workTypeBox1">
    <view class="workTypeBox">
      <view class="workTypeBox-left">
        <scroll-view class="sameUl" :scroll-y="true">
          <li
            @click="tabLeft(index, item)"
            :class="{ active: activeIndex == index }"
            :key="item.id"
            v-for="(item, index) in leftDate"
          >
            {{ item.name }}
          </li>
        </scroll-view>
      </view>
      <view class="workTypeBox-right">
        <scroll-view
          v-if="rightDate.length"
          class="sameUl dif"
          :scroll-y="true"
        >
          <li
            :class="{ actives: item.checked }"
            @click="tabRight(item)"
            :key="item.id"
            v-for="item in rightDate"
          >
            <div>{{ item.name }}</div>
            <u-icon class="icon" name="checkbox-mark"></u-icon>
          </li>
        </scroll-view>
        <u-empty class="empty" v-else text="暂无数据" mode="list"></u-empty>
      </view>
    </view>

    <view class="btnbox">
      <u-button class="clear btn" type="error" @click="clearList"
        >清除</u-button
      >
      <u-button class="btn" type="primary" @click="closeDropdown"
        >确定
        <span>（可多选）</span>
      </u-button>
    </view>
  </view>
</template>

<script>
import api from "../../../api/routes";
export default {
  data() {
    return {
      activeIndex: 0,
      checkedLen: [],
      leftDate: [],
      rightDate: [],
    };
  },
  methods: {
    tabLeft(i, item) {
      this.activeIndex = i;
      this.rightDate = item.children;
      this.rightDate.map((i) => {
        this.$set(i, "checked", false);
      });
      this.checkedLen = 0;
    },
    tabRight(item) {
      console.log(item.id);

      if (this.checkedLen.length == 3) {
        this.rightDate.map((r) => {
          if (item.id == r.id) {
            r.checked = false;
          }
        });

        this.checkedLen = this.rightDate.filter((i) => i.checked);
        if (this.checkedLen.length == 3) {
          uni.$u.toast("最多只能选择3个!");
        }

        console.log(this.checkedLen);
        // return;
      } else {
        item.checked = !item.checked;
        this.checkedLen = this.rightDate.filter((i) => i.checked);
        console.log(this.checkedLen);
      }
    },
    clearList() {
      this.checkedLen = [];
      this.rightDate.map((i) => {
        this.$set(i, "checked", false);
      });
    },
    closeDropdown() {
      //  let sendIds='';
      // if (this.checkedLen && this.checkedLen.length) {
      //   let ids = this.checkedLen.map((i) => i.id);
      //    sendIds = ids && ids.length ? ids.join(",") : "";
      // }
      this.$emit("sendIds", this.checkedLen);
    },
    async getList() {
      const res = await this.$myRequest({
        // url: "/app/job/workTypeList",
        url: api.workTypeList,
        method: "GET",
        data: {},
      });
      console.log(res.data.list);
      if (res.data.list && res.data.list.length) {
        this.leftDate = res.data.list;
        this.rightDate = res.data.list[0].children;
        this.rightDate.map((i) => {
          this.$set(i, "checked", false);
        });
      }
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style scoped lang="scss">
.workTypeBox1 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // .scroll {
  //   height: calc(100% -50px);
  // }

  .workTypeBox {
    flex: 1;
    display: flex;
    background: #fff;
    overflow-y: auto;

    &-left {
      width: 110px;
      height: 100%;
      overflow-y: auto;
      border-right: 1px solid #eee;
      background: #f8f8f8;
    }

    &-right {
      flex: 1;
      height: 100%;
      overflow-y: auto;
    }
  }
  .btnbox {
    padding: 0 20px;
    height: 50px;
    background: #fff;

    display: flex;
    align-items: center;
    .btn {
      font-size: 14px;
      flex: 1;
      &.clear {
        margin-right: 20px;
      }
      span {
        font-size: 12px;
      }
    }
  }
}

.sameUl {
  list-style-type: none;
  margin: 0;
  padding: 0;
  li {
    padding: 10px 5px 10px 8px;
    color: #555;
    font-size: 13px;
    &.active {
      color: #2979ff;
    }
  }
}
.dif {
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    div {
      flex: 1;
    }
    .icon {
      width: 20px;
      display: none;
    }
    &.actives {
      color: #2979ff;
      .icon {
        display: block;
      }
    }
  }
}
</style>
